<template>
	<view class="information">
		<view class="header">

		</view>
		<view class="information-list" v-for="item in dataList" :key="item.id" :data-ids="item.id">
			<!-- 图片 -->
			<view class="information-imglist">
				<image class="information-img" :src="item.image" @click="gotoDetail(item.id)"></image>
			</view>
			<!-- 内容 -->
			<view class="information-right">
				<view class="information-content" @click="gotoDetail(item.id)">
					{{item.content}}
				</view>
				<view class="information-right-bottom">
					<view class="information-date" @click="gotoDetail(item.id)">
						<image class="information-dateimg information-contentImg"
							src="https://wlsy.nanjingyunpeng.cn/weixin/image/dateImg.png"></image>
						<text>{{item.updated_at}}</text>
					</view>
					<view class="information-likes" @click="dianzan(item.id)">
						<image class="information-img information-contentImg"
							:src="item.user_zan == 1 ? 'https://wlsy.nanjingyunpeng.cn/weixin/image/supportImg.png' : 'https://wlsy.nanjingyunpeng.cn/weixin/image/likesImg.png'"></image>
						<text>{{item.zan_num}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getinformation,
		zaninformation
	} from "../../api/api.js"
	export default {

		data() {
			return {
				dataList: [],
				// flagLikes: false
			}
		},

		onLoad() {
			this.getinformation()
		},
		methods: {
			async getinformation() {
				let res = await getinformation()
				if (res.code == 1000) {
					// console.log("资讯列表", res)
					let dataList = res.data.data;
					dataList.forEach((item, index) => {
						item.content = item.content.substring(3).substring(0, item.content.length - 7)
					})
					this.dataList = dataList
					this.$forceUpdate()
					// console.log("this.dataList", this.dataList)
				}
			},
			async dianzan(id) {
				// this.flagLikes = !this.flagLikes
				// console.log(id)
				let res = await zaninformation({
					information_id: id
				})
				// console.log("eeee", res)
				if (res.code === 1000) {
					this.getinformation()
				}
			},
			gotoDetail(id) {
				// console.log("id", id)
				uni.navigateTo({
					url: `/pages/information/informationDetail?id=${id}`
					// url: "/pages/information/informationDetail?id="+id + "&type=" + string
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.information {
		background-color: #EEF7FE;
		padding-top: 70rpx;
		min-height: 100%;

		.header {
			width: 750rpx;
			height: 40rpx;
			background: #466EE7;
			border-radius: 0rpx 0rpx 60rpx 60rpx;
			position: fixed;
			top: 0;
		}
	}

	.information-list {
		width: 690rpx;
		height: 220rpx;
		margin-left: 30rpx;
		margin-bottom: 10rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 4rpx 0px rgba(51, 51, 51, 0.05);
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		padding-left: 30rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		display: flex;
	}

	.information-imglist {
		width: 160rpx;
		height: 160rpx;
	}

	.information-img {
		width: 100%;
		height: 160rpx;
	}

	.information-right {
		margin-left: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.information-content {
		width: 226px;
		height: 42px;
		font-size: 15px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 18px;
	}

	.information-contentImg {
		width: 36rpx;
		height: 36rpx;
	}

	.information-right-bottom {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 16px;
	}

	.information-date {
		display: flex;
		margin-top: 15rpx;
		align-items: center;
	}

	.information-likes {
		display: flex;
		margin-top: 15rpx;
		align-items: center;
	}
</style>
